<template>
    <div>
        <div class="headerstyle">固井作业数据查询</div>
        <el-row style="border-bottom: 1px solid rgb(235, 237, 230); margin-bottom: 10px; margin-top: 10px">
            <!-- 查询栏 -->
            <el-row style="margin-bottom: 10px">
                <!-- 查询栏 -->
                <el-form :inline="true" :model="searchModel">
                    <el-row>
                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-input placeholder="请填写井名" v-model="searchModel.wellName" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="0.5">
                            <p style="color: rgb(212, 217, 217)">&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        </el-col>
                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-select v-model="searchModel.caseLevel" clearable placeholder="请选择套管层级">
                                    <el-option
                                        v-for="item in caseLevelOptions"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                        :disabled="item.disabled"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-input placeholder="水泥浆密度下限" v-model="searchModel.densitylow" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="0.5">
                            <p style="color: rgb(212, 217, 217)">_&nbsp;&nbsp;</p>
                        </el-col>
                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-input placeholder="水泥浆密度上限" v-model="searchModel.densityhight" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>

                        <el-col :sm="8" :md="8" :lg="3" :xl="3">
                            <el-form-item>
                                <el-input placeholder="流动度下限" v-model="searchModel.fluiditylow" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="0.5">
                            <p style="color: rgb(212, 217, 217)">_&nbsp;&nbsp;</p>
                        </el-col>
                        <el-col :sm="8" :md="8" :lg="3" :xl="3">
                            <el-form-item>
                                <el-input placeholder="流动度下限" v-model="searchModel.fluidityhight" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-input placeholder="24h抗压强度下限" v-model="searchModel.pressure24low" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="0.5">
                            <p style="color: rgb(212, 217, 217)">_&nbsp;&nbsp;</p>
                        </el-col>
                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-input placeholder="24h抗压强度上限" v-model="searchModel.pressure24hight" clearable maxlength="20" />
                            </el-form-item>
                        </el-col>

                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-date-picker
                                    v-model="searchModel.solidTimelow"
                                    type="date"
                                    align="right"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%"
                                    placeholder="稠化起始时间"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="0.5">
                            <p style="color: rgb(212, 217, 217)">_&nbsp;&nbsp;</p>
                        </el-col>
                        <el-col :sm="8" :md="8" :lg="4" :xl="3">
                            <el-form-item>
                                <el-date-picker
                                    v-model="searchModel.solidTimehight"
                                    type="date"
                                    align="right"
                                    value-format="yyyy-MM-dd"
                                     style="width: 100%"
                                    placeholder="稠化结束时间"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="4" :md="4" :lg="2" :xl="1">
                            <el-form-item>
                                <el-button type="primary" @click="submitSearchModel">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </el-row>
        <div class="headerstyle">查询数据</div>
        <el-row style="margin-top: 10px">
            <el-table :data="totalTableData"  >
                <template slot="empty">
                    <span>查询为空</span>
                </template>
                <el-table-column 
                    v-for="(item, index) in tableHead" :key="index" 
                    :prop="$t(item.property)" 
                    :label="$t(item.label)">
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
import { cementWorkDataFind } from '../../../api/module/statisticalAnalysis/CementingWorkData';
import { ListDataDictByCondition, GetTableHead } from '../../../api/module/dataClassification/data_classification';
export default {
    data() {
        return {
            searchModel: {
                currentPage: 1, //当前页
                pageSize: 10, //页大小
                wellName: '', //
                caseLevel: '',
                densitylow: '', //
                densityhight: '',
                fluiditylow: '', //
                fluidityhight: '', //
                pressure24low: '',
                pressure24hight: '',
                solidTimelow: '',
                solidTimehight: ''
            },
            caseLevelOptions: [], //套管层级
            totalTableData: [],//表格数据
            tableHead: [],//表头数据
            emptytext:'点击查询显示数据'  //表格数据为空时的显示，
        };
    },
    created() {
        this.Getlist();
        this.cementWorkDataFind();
    },
    methods: {
        //获取表头数据
        GetTable() {
            GetTableHead('cementslury_real').then((res) => {
                this.tableHead = res.data;
                // console.log('表头数组');
                // console.log(this.tableHead);
                this.tableHead[6].label =  this.tableHead[6].label + '(g/cm^3)'
                this.tableHead[10].label =  this.tableHead[10].label + '(min)'
                this.tableHead[11].label =  this.tableHead[11].label + '(mpa)'
                this.tableHead[12].label =  this.tableHead[12].label + '(mpa)'
                this.tableHead[13].label =  this.tableHead[13].label + '(mpa)'
                this.tableHead[14].label =  this.tableHead[14].label + '(min)'
            });
        },
        //点击查询
        submitSearchModel() {
            this.pageIdx = 1;
            this.currentPage = 1;
            this.cementWorkDataFind();
            this.$message.success('点击查询数据');
        },
        cementWorkDataFind() {
            cementWorkDataFind(this.searchModel)
                .then((res) => {
                    this.GetTable();
                    console.log('查询接口调用成功res:' + res);
                    //设置表格数据
                    this.totalTableData = res.data.records;
                    // console.log('表格数据数组');
                    // console.log(this.totalTableData);
                })
                .catch((err) => {
                    this.$message.error('查询接口调查失败');
                    console.log(err);
                });
        },
        Getlist() {
            ListDataDictByCondition('套管层次')
                .then((res) => {
                    this.caseLevelOptions = res.data;
                })
                .catch((err) => {
                    console.log('获取套管层次列表失败：');
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.headerstyle {
    font-size: 17px;
    background-color: #eef0f6;
    height: 30px;
    padding: 5px 10px;
    margin-bottom: 10px;
}
</style>
